<template>
  <div>
    <el-dialog
      ref="refDlg"
      title="延期申请"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="clearForm"
      width="700px"
      @close="closeDialog"
    >
      <div>
        <c-list
          ref="refForm"
          label-width="130px"
          :column="3"
          :model="formData"
          :rules="formRules"
        >
          <c-list-item label="走访整改任务号" :value="detail.patrolTaskNo" />
          <c-list-item dict-type-code="DAILY_STATUS" label="走访任务进度" :value="detail.schedule" />
          <c-list-item label="整改问题分类" dict-type-code="RECTIFICATION_CLASSIFICATION" :value="detail.classification" />
          <c-list-item label="门店编码" :value="detail.shopCode" />
          <c-list-item :span="2" label="门店名称" :value="detail.shopName" />
          <c-list-item label="应整改完成时间" :value="detail.lateCompletionDate" />
          <c-list-item :span="2" type="date" label="申请延期时间" prop="lateCompletionDate" :value="formData.lateCompletionDate">
            <el-date-picker
              v-model="formData.lateCompletionDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              clearable
            />
          </c-list-item>

          <c-list-item :span="3" label="备注" :value="formData.lateNotes">
            <el-input v-model="formData.lateNotes" type="textarea" show-word-limit maxlength="200" />
          </c-list-item>
        </c-list>
        <patrol-question
          no-count
          no-btns
          :other-param="detail.classification"
          :schedule="detail.schedule"
          :config-id-after="configIdAfter"
          :rectify-no="detail.rectifyNo"
          :config-id-before="configIdBefore"
          :patrol-id="detail.patrolId"
          @select="getSelect"
        />
      </div>
      <div slot="footer">
        <el-button :loading="saveLoading" size="mini" type="primary" @click.native="handleSubmit">提交</el-button>
        <el-button size="mini" @click.native="closeDialog">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { saveDelayForm } from '@/api/marketService/problemRectify'
import PatrolQuestion from './PatrolQuestion.vue'
import { postConfigAttachmentTemplate } from '@/api/marketService/dailyPatrol'
export default {
  name: 'ProblemRectifyDelay',
  components: { PatrolQuestion },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      selectIds: [],
      saveLoading: false,
      configIdAfter: '',
      configIdBefore: '',
      formRules: {
        lateCompletionDate: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      formData: { id: '', lateNotes: '', lateCompletionDate: '', ids: [] }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    postConfigAttachmentTemplate().then(res => {
      if (res.success && res.data.records) {
      // 根据belongModel获取每个配置id
        const tempArr = res.data.records.filter(el => el.enable === 1)
        tempArr.map(el => {
          if (el.attachmentType === '整改前') this.configIdBefore = el.id
          if (el.attachmentType === '整改后') this.configIdAfter = el.id
        })
      }
    })
  },
  methods: {
    getSelect(data) {
      this.selectIds = data.map(v => v.id)
    },
    closeDialog() {
      this.dialogShow = false
    },
    clearForm() {
      this.closeDialog()
      this.formData = { id: '', lateNotes: '', lateCompletionDate: '', ids: [] }
    },
    handleSubmit() {
      if (!this.selectIds || this.selectIds.length === 0) {
        this.$message.warning('请选择申请延期问题')
        return
      }

      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.formData.ids = this.selectIds
          this.formData.id = this.detail.id
          this.saveLoading = true
          saveDelayForm(this.formData).then(res => {
            if (res.success) {
              this.saveLoading = false
              this.$message.success('操作成功')
              this.$emit('success')
              this.closeDialog()
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
